import React, { useState, useMemo } from 'react';
import { Card, Tabs, Space, ConfigProvider, theme } from 'antd';
import { SettingOutlined, VideoCameraOutlined, AudioOutlined, FontSizeOutlined } from '@ant-design/icons';
import ClipSettings from './ClipSettings';
import FontStyleSettings from './FontStyleSettings';
import AudioSettings from './AudioSettings';
import EffectSettings from './EffectSettings';

// 片段类型定义
export type SegmentType = 'video' | 'audio' | 'text';

// 配置项类型定义
export type ConfigType = 'clip' | 'video' | 'audio' | 'text' | 'effect';


// 暗黑主题配置
const darkTheme = {
    algorithm: theme.darkAlgorithm,
    token: {
        colorPrimary: '#715bb8',
        colorBgContainer: '#2a2a2a',
        colorBgElevated: '#2a2a2a',
        colorText: '#ffffff',
        colorTextSecondary: 'rgba(255, 255, 255, 0.7)',
        colorBorder: '#434343',
        colorBorderSecondary: '#434343',
        borderRadius: 6,
        colorFillSecondary: '#434343',
    },
    components: {
        Card: {
            colorBgContainer: '#2a2a2a',
            colorBorder: '#434343',
            colorText: '#ffffff',
            colorTextHeading: '#ffffff',
        },
        Tabs: {
            itemColor: 'rgba(255, 255, 255, 0.7)',
            itemHoverColor: '#ffffff',
            itemSelectedColor: '#715bb8',
            inkBarColor: '#715bb8',
            cardBg: '#2a2a2a',
            cardPadding: '12px 16px',
        },
    },
};

interface SettingsProps {
    disabled?: boolean;
    // 片段类型，用于决定显示哪些配置选项
    segmentType?: SegmentType;
    // 用于防抖保存的参数
    draftId?: string;
    trackId?: string;
    segmentId?: string;
}

// 根据片段类型获取可用的配置选项
const getAvailableConfigs = (segmentType: SegmentType): ConfigType[] => {
    switch (segmentType) {
        case 'video':
            return ['clip', 'audio', 'effect']; // 视频片段可以配置片段变换、音频设置、特效设置 (暂时注释掉视频设置)
            // return ['clip', 'video', 'audio', 'effect']; // 视频片段可以配置片段变换、视频设置、音频设置、特效设置
        case 'audio':
            return ['clip', 'audio']; // 音频片段只能配置片段变换和音频设置
        case 'text':
            return ['clip', 'text', 'effect']; // 文本片段可以配置片段变换、文本设置、特效设置
        default:
            return ['clip']; // 默认只显示片段变换
    }
};

// 配置项信息
const configInfo = {
    clip: {
        key: 'clip',
        label: '片段变换',
        icon: <VideoCameraOutlined />,
        description: '透明度、旋转、翻转、缩放、位移等基础变换设置',
    },
    video: {
        key: 'video',
        label: '视频设置',
        icon: <VideoCameraOutlined />,
        description: '视频特效、滤镜、蒙版等视频相关设置',
    },
    audio: {
        key: 'audio',
        label: '音频设置',
        icon: <AudioOutlined />,
        description: '音量、音效、音频特效等音频相关设置',
    },
    text: {
        key: 'text',
        label: '文本设置',
        icon: <FontSizeOutlined />,
        description: '字体、颜色、样式、动画等文本相关设置',
    },
    effect: {
        key: 'effect',
        label: '特效设置',
        icon: <SettingOutlined />,
        description: '动画、滤镜、蒙版、转场等特效相关设置',
    },
};

const Settings: React.FC<SettingsProps> = ({
    disabled = false,
    segmentType = 'video', // 默认为视频类型
    draftId,
    trackId,
    segmentId,
}) => {
    // 根据片段类型获取可用的配置选项
    const availableConfigs = useMemo(() => getAvailableConfigs(segmentType), [segmentType]);

    // 默认激活第一个可用的配置项
    const [activeTab, setActiveTab] = useState<string>(availableConfigs[0] || 'clip');


    // 渲染片段设置
    const renderClipSettings = () => <ClipSettings disabled={disabled} trackId={trackId} segmentId={segmentId} draftId={draftId} />;

    // 渲染视频设置（占位）- 暂时注释掉
    // const renderVideoSettings = () => (
    //     <Card size="small" title="视频设置" style={{ backgroundColor: '#2a2a2a', border: '1px solid #434343' }}>
    //         <div style={{ padding: '20px', textAlign: 'center', color: '#ffffff' }}>
    //             <VideoCameraOutlined style={{ fontSize: '48px', color: '#715bb8', marginBottom: '12px' }} />
    //             <p style={{ color: 'rgba(255, 255, 255, 0.7)', margin: 0 }}>视频设置功能开发中...</p>
    //         </div>
    //     </Card>
    // );

    // 渲染音频设置
    const renderAudioSettings = () => <AudioSettings disabled={disabled} trackId={trackId} segmentId={segmentId} draftId={draftId} />;

    // 渲染文本设置
    const renderTextSettings = () => <FontStyleSettings disabled={disabled} trackId={trackId} segmentId={segmentId} draftId={draftId} />;

    // 渲染特效设置
    const renderEffectSettings = () => (
        <EffectSettings disabled={disabled} segmentType={segmentType} draftId={draftId} trackId={trackId} segmentId={segmentId} />
    );

    // 渲染配置项内容
    const renderConfigContent = (configType: ConfigType) => {
        switch (configType) {
            case 'clip':
                return renderClipSettings();
            // case 'video':
            //     return renderVideoSettings(); // 暂时注释掉视频设置
            case 'audio':
                return renderAudioSettings();
            case 'text':
                return renderTextSettings();
            case 'effect':
                return renderEffectSettings();
            default:
                return null;
        }
    };

    // 获取片段类型显示名称
    const getSegmentTypeName = (type: SegmentType): string => {
        const typeNames = {
            video: '视频片段',
            audio: '音频片段',
            text: '文本片段',
        };
        return typeNames[type] || '未知片段';
    };

    return (
        <ConfigProvider theme={darkTheme}>
            <div style={{ width: '100%', height: '100%', backgroundColor: '#1a1a1a', padding: '0', margin: '0', boxSizing: 'border-box' }}>
                <Card
                    title={
                        <Space>
                            <SettingOutlined style={{ color: '#715bb8' }} />
                            <span style={{ color: '#ffffff' }}>{getSegmentTypeName(segmentType)}设置</span>
                        </Space>
                    }
                    style={{
                        backgroundColor: '#2a2a2a',
                        border: '1px solid #434343',
                        height: '100%',
                        width: '100%',
                        boxSizing: 'border-box',
                    }}
                    styles={{
                        header: {
                            borderBottom: '1px solid #434343',
                            color: '#ffffff',
                        },
                        body: {
                            padding: '0',
                            height: 'calc(100% - 57px)',
                            overflow: 'auto',
                        },
                    }}
                >
                    <Tabs
                        activeKey={activeTab}
                        onChange={setActiveTab}
                        type="card"
                        size="small"
                        style={{ height: '100%', width: '100%', boxSizing: 'border-box' }}
                        tabBarStyle={{
                            margin: '0 0 12px 0',
                            backgroundColor: '#2a2a2a',
                            borderBottom: '1px solid #434343',
                        }}
                        items={availableConfigs.map((configType) => {
                            const config = configInfo[configType];
                            return {
                                key: configType,
                                label: (
                                    <Space>
                                        {config.icon}
                                        <span>{config.label}</span>
                                    </Space>
                                ),
                                children: renderConfigContent(configType),
                            };
                        })}
                    />
                </Card>
            </div>
        </ConfigProvider>
    );
};

export default Settings;
